<template>
    <view class="__pd_order_card">
		<slot name="header"></slot>
		<view class="__padding-wrapper">
			<view class="flex aic jcsb _mb_30">
				<view class="__order_time">
					<slot name="timeFrontLabel"></slot>
					<text>
						{{ PD.Filters.Order.OrderTime(order.depart_time_left, order.arrive_time_right) }}
					</text>
					<text class="_ml_10 warn-color">{{ PD.Filters.Order.NumDispose(order.business_id, order.num) }}</text>
				</view>
				<slot name="isPassenger"></slot>
			</view>
			<view class="__order_container flex jcsb">
				<view class="__order_address flex1" @tap="viewPointInMap">
					<view class='flex _mb_24'>
						<text class="iconfont primary-color">&#xe74d;</text>
						<view style="overflow: hidden;">
							<view class="_mb_16">{{order.departure.city}}·{{ order.departure.district }}</view>
							<view class="__address_detail flex">
								<view>{{ order.departure.address }}</view>
								<text class="iconfont">&#xe66a;</text>
							</view>
						</view>
					</view>
					<view class='flex'>
						<text class="iconfont warn-color">&#xe74d;</text>
						<view  style="overflow: hidden;">
							<view class="_mb_16">{{order.destination.city}}·{{ order.destination.district }}</view>
							<view class="__address_detail flex">
								<view>{{ order.destination.address }}</view>
								<text class="iconfont">&#xe66a;</text>
							</view>
						</view>
					</view>
				</view>
				<view class="__price_info">
					<slot name="priceLabel"></slot>
						<view class="_text_size_24 warn-color" v-if="!$slots.priceOther">
							<template v-if="order.price.driver_fee">
								￥<text class=" _text_size_40 _text_weight_bold">{{ order.price.driver_fee }}</text>
							</template>
							<template v-if="!order.price.driver_fee && ![ORDER_CREATE_TYPE.passengerScanQrcode,ORDER_CREATE_TYPE.driverInput].includes(order.create_type as ORDER_CREATE_TYPE)">
								<text class="iconfont __drvier_fee_zero_tips" @tap="showPriceZeroTips">&#xe707;</text>
							</template>
						</view>
					<slot name="priceOther"></slot>
					<slot name="price">
						<view class="_text_size_20" v-if=" order.price.dist_commission > 0">分享赚佣金：￥{{ order.price.dist_commission }}</view>
					</slot>
				</view>
			</view>
			<view class="__order_tags" v-if="!$slots.tabs">
				<view v-if="order.extend && order.extend?.need_insurance" class="__ins">
					订单险
				</view>	
				<view v-if="order.estimate.distance">
					预估里程{{ order.estimate.distance }}公里<text v-if="order.estimate.duration > 0">，{{ PD.Filters.Order.EdtimateDuraction(order.estimate.duration) }}</text>
				</view>
				<view>
					{{ order.create_type === ORDER_CREATE_TYPE.cpInput ? '录入' : `${order.channel_name}` }}
				</view>
				<!-- 尾号 -->
				<view v-if="order.client_show_mobile">
					{{ order.client_show_mobile }}
				</view>
				<view v-if="order.cat_name ">{{ order.cat_name}}</view>
				<view v-if="order.remark" class="__remark">{{ order.remark }}</view>
			</view>
			<slot name="tabs"></slot>
		</view>
		
		<!-- 动态底部插槽，用来兼容订单卡片在不同状态下的不同样式 -->
		<slot name="footer">
			
		</slot>
    </view>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';
import PD from '../libs';
import type { ApiOrderTypes } from '@/api/api-types/api-order-types';
import { ORDER_ADDRESS_TYPE, ORDER_CREATE_TYPE } from '../enum/pd-enum';
import { APP_ROUTES } from '../enum/app-routes';

const props = defineProps({
	order : {
		type : Object as PropType<ApiOrderTypes.OrderDto>,
		default : () => {
			return {};
		}
	}
});

//地图上查看起终点
const viewPointInMap = () => {
	const points = [
		{
			address : `${props.order.departure.city}${props.order.departure.address}`,
			type : ORDER_ADDRESS_TYPE.depart,
			location : {
				latitude : props.order.departure.latitude,
				longitude : props.order.departure.longitude
			}
		},{
			address : `${props.order.destination.city}${props.order.destination.address}`,
			type : ORDER_ADDRESS_TYPE.arrive,
			location : {
				latitude : props.order.destination.latitude,
				longitude : props.order.destination.longitude
			}
		},
	];
	PD.UniHelp.navTo(`${APP_ROUTES.viewOrderAddressInMap}?points=${JSON.stringify(points)}`);
};

const showPriceZeroTips = () => {
	PD.UniHelp.modal('因您所归属车队的抽佣设置，订单完成后平台将订单费用全额结算给车队，如有疑问请联系车队管理员');
};

</script>

<style scoped lang="less">
.__pd_order_card {
	background: #fff;
	border-radius: 16rpx;
	overflow: hidden;
	.__padding-wrapper {
		padding: 24rpx;
	}
	.__order_time {
		font-size: 30rpx;
		font-weight: bold;
	}
	.__order_container {
		.__order_address {
			flex: 1;
			font-size: 28rpx;
			overflow: hidden;
			.iconfont {
				padding-top: 6rpx;
				font-size: 26rpx;
				margin-right: 10rpx;
			}
			.__address_detail {
				color: #8F949A;
				view {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
		.__price_info {
			margin-left: 50rpx;
			text-align: right;
			.__drvier_fee_zero_tips {
				color: #999;
			}
		}
	}
	.__order_tags {
		margin-top: 30rpx;
		display: flex;
		flex-wrap: wrap;
		font-size: 20rpx;
		gap : 12rpx;
		view {
			padding: 6rpx 16rpx;
			border-radius: 8rpx;
			background: #F8F8F8;
		}
		.__ins {
			background-image: linear-gradient(180deg, #49CBFF 0%, #0870F0 100%);
			color: #fff;
		}
		.__remark {
			overflow-wrap: anywhere;
			max-width: 100%;
		}
	}
	.__pd_order_card_footer {
		image {
			width: 48rpx;
			height: 48rpx;
			margin-left: 24rpx;
		}
		button {
			flex: 1;
		}
	}
}
</style>